<template>
  <div>
    <van-nav-bar
      title="个人中心"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({path:'/'})"
    >
    <template #right>
      <van-icon name="wap-home-o" size="6vw"/>
    </template>
    </van-nav-bar>
    <!-- 1.0用户信息 -->
    <router-link :to="`/user_edit?id=${$route.query.id}`" class="info">
        <div class="avatat">
           <van-image
            round
            fit="cover"
            width="100%"
            height="100%"
            :src="userinfo.head_img"
           >
           </van-image>
        </div>
        <div class="center">
            <p class="username">
                <i class="iconfont iconxingbienan" v-if="userinfo.gender"></i>
                <i class="iconfont iconxingbienv" v-else></i>
                <span>{{userinfo.nickname}}</span>
            </p>
             <p v-if="userinfo.create_date" class="date">{{userinfo.create_date | formatDate}}</p>
        </div>
        <i class="iconfont iconjiantou1"></i>
    </router-link>
      <MyCell title="我的关注" value="关注的用户"
       to="/user_follow"
       ></MyCell>
      <MyCell title="我的跟帖" value="跟帖回复"
      to="/user_comments" 
      ></MyCell>
      <MyCell title="我的收藏" value="文章/视频" 
      to="/usersta"
      ></MyCell>
      <MyCell title="设置" vlaue='' 
      @click='cellFn'
      ></MyCell>
      <MyButton @click="logoutFn">退出</MyButton>
  </div>
</template>

<script>
import MyButton from '../components/MyButton.vue'
import MyCell from '../components/Mycell.vue'
import{removeToken,removeUserId} from '../utils/localData'
import {userDetaiAPI} from '../apis/user'
import request from '../utils/myaxios'
export default {
    data () {
        return {
            userinfo:{},
        }
    },
    components:{
        MyButton,
        MyCell
    },
    methods:{
        cellFn() {
            console.log('点击了');
        },
        logoutFn() {
            this.$dialog.confirm({
                title:"是否退出？",
            }).then(() => {
                console.log('点击了确认');
                // localStorage.removeItem('hmtt_token')
                  removeToken();
                  removeUserId();
                this.$router.replace({path: '/'});
            }).catch(() => {});
        }

    },
   async created (){ 
    //   const res = await userDetaiAPI(this.$route.query.id)
    //     console.log(res);
    const id = this.$route.query.id;
    // const id = this.$route.query.id;
    // 根据 id 获取用户信息
    const res = await userDetaiAPI(id);
    // console.log(res);
    res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img
    this.userinfo = res.data.data;
    }
}
</script>

<style lang="less" scoped>
    .info{
        height: 120px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        border-bottom: 5px solid #ddd;
        .avatat{
            width: 80px;
            height: 80px;
        }
        .center{
            flex: 1;
            margin-left: 15px;
            .username{
                font-size: 16px;
            }
            .date{
                font-size: 14px;
                margin-top: 10px;
                color: #666;
            }
            .iconxingbienan{
                font-size: 20px;
                color: violet;
            }
            .iconxingbienv{
                font-size: 20px;
                color: pink;
            }
        }
    .iconjiantou1{
        font-size: 14px;
    }
    }
    /deep/ a{
        color: violet;
    }
</style>